<template>
    <el-dialog :title="title" :visible.sync="visible" :before-close="closeDialog">
        <el-form :model="form" :rules="rules" ref="ruleForm" :label-width="formLabelWidth" size="small">
            <el-form-item label="所属门店" prop="storeId">
                <el-select v-model="form.storeId" placeholder="请选择所属门店">
                    <el-option
                        v-for="item in storeList"
                        :key="item.storeId"
                        :label="item.name"
                        :value="item.storeId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="门店店员" prop="username" class="innerVisible">
                <el-input v-model="form.username" placeholder="请选择门店店员" disabled></el-input> 
                <el-button type="primary" @click="openInnerDialog">选择</el-button>
            </el-form-item>
        </el-form>
        <el-dialog
            width="70%"
            title="选择门店店长"
            :visible.sync="innerVisible"
            :before-close="closeInnerDialog"
            append-to-body>
            <el-form :inline="true" :model="formInline" :rules="innerrules" ref="innerRuleForm" size="mini" class="demo-form-inline">
                <el-form-item label="" prop="username">
                    <el-input v-model="formInline.username" placeholder="请输入名称搜索"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" icon="el-icon-refresh-left" @click="onReset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                :data="innerVisibleTableData.records" size="mini"
                style="width: 100%">
                <el-table-column align="center" header-align="center"
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column align="center" header-align="center"
                    prop="username"
                    label="用户名">
                </el-table-column>
                <el-table-column align="center" header-align="center"
                    prop="sex"
                    label="性别">
                </el-table-column>
                <el-table-column label="操作" width="160" align="center" header-align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"  type="primary"
                            @click="handleEdit(scope.$index, scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 8px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="innerVisibleTableData.current"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="innerVisibleTableData.size"
                layout="total, prev, pager, next, sizes,jumper"
                :total="innerVisibleTableData.total">
            </el-pagination>
        </el-dialog>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="comitDialog">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import {addClerk} from '@/api/modules/StoreManagement/clerkManagement.js'
import {getUserByLikeUsername} from '@/api/modules/SystemManagement/userManagement.js'
export default {
    props: {
        title: String,
        visible: {
            type: Boolean,
            default: false
        },
        storeList:{
            type: Array
        },
        form:{
            type: Object
        },
    },
    watch: {
        visible(newdata) {
            if(!newdata){
                this.resetForm("ruleForm");
            }
        }
    },
    data() {
        return {
            formLabelWidth: '80px',
            rules: {
                username:[
                    { required: true, message: '请选择门店店员', trigger: 'change' }
                ],
                storeId:[
                    { required: true, message: '请选择一个门店', trigger: 'change' }
                ]
            },
            innerVisibleTableData:[],
            formInline: {
                username: ''
            },
            size:5,
            innerrules:{
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
            },
            innerVisible: false,
        }
    },
    methods: {
         //搜索
        onSubmit() {
            this.$refs["innerRuleForm"].validate((valid) => {
                if (valid) {
                    this.getUserByLikeUsername(1,this.size,this.formInline.username);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置
        onReset() {
            this.$refs["innerRuleForm"].resetFields();
            this.getUserByLikeUsername(1,this.size,'');
        },
        closeDialog(){
            this.$emit("closeDialog")
        },
        operationFrom(){
          this.$emit("operationFrom")
        },
        comitDialog(){
            this.submitForm("ruleForm");
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    let data = JSON.parse(JSON.stringify(this.form));
                    if(this.title == "新增门店店员"){
                        addClerk(data).then(()=>{
                            this.operationFrom();
                        })
                    }
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //innerVisible table选择按钮
        handleEdit(index, row) {
            // console.log(index, row);
            this.form.username = row.username
            this.form.userId = row.userId
            this.closeInnerDialog()
        },
        //打开innerDialog
        openInnerDialog(){
            this.getUserByLikeUsername(1,this.size,'');
            this.innerVisible=true
        },
        //关闭innerDialog
        closeInnerDialog(){
            this.$refs["innerRuleForm"].resetFields();
            this.innerVisible=false
        },
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.size = val;
            this.getUserByLikeUsername(1,val,this.formInline.username);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.getUserByLikeUsername(val,this.size,this.formInline.username);
        },
        getUserByLikeUsername(current,size,username){
            getUserByLikeUsername({current:current,size:size,username:username}).then(res=>{
                this.innerVisibleTableData = res.data.data
            })
        },
    }
}
</script>
<style scoped>
.el-select{
    width: 100%;
}
.innerVisible >>> .el-form-item__content{
    display: flex;
}
.innerVisible >>> .el-form-item__content button{
    margin-left: 10px;
}
</style>